/**
 * 瀑布流布局计算工具函数
 * 将图片数据按照瀑布流方式分配到不同列
 */

export interface ImageItem {
  id: string;
  url: string;
  width: number;
  height: number;
  aspectRatio?: number;
  calculatedHeight?: number;
}

export interface ColumnLayout {
  items: ImageItem[];
  height: number;
}

/**
 * 计算瀑布流布局
 * @param items 图片数据数组
 * @param columnCount 列数
 * @param targetWidth 目标宽度（每列宽度）
 * @returns 布局后的列数据
 */
export const calculateMasonryLayout = (
  items: ImageItem[],
  columnCount: number,
  targetWidth: number,
): ColumnLayout[] => {
  // 初始化列
  const columns: ColumnLayout[] = Array.from({ length: columnCount }, () => ({
    items: [],
    height: 0,
  }));

  // 计算每张图片的高宽比和实际高度
  const processedItems = items.map((item) => ({
    ...item,
    aspectRatio: item.aspectRatio || item.width / item.height,
    calculatedHeight: Math.round(
      targetWidth / (item.aspectRatio || item.width / item.height),
    ),
  }));

  // 将图片分配到最短的列
  processedItems.forEach((item) => {
    // 找到当前高度最小的列
    const shortestColumn = columns.reduce((min, column) =>
      column.height < min.height ? column : min,
    );

    // 将图片添加到最短列
    shortestColumn.items.push(item);
    shortestColumn.height += item.calculatedHeight;
  });

  return columns;
};

/**
 * 获取响应式列数
 * @param containerWidth 容器宽度
 * @returns 适合的列数
 */
export const getResponsiveColumnCount = (containerWidth: number): number => {
  if (containerWidth < 640) {
    return 2;
  } else if (containerWidth < 1024) {
    return 4;
  } else if (containerWidth < 1280) {
    return 6;
  } else {
    return 8;
  }
};
